import React, { useState } from 'react'
import { Select, Form, Input, Space } from 'antd';
const { Option } = Select;
const { Search } = Input;




export default function Searche({ show }) {

    let [state, setState] = useState({ type: "username", value: "" })

    const [form] = Form.useForm();
    
    const onSearch = async (value) => {
        console.log(state.type,value);
        show({ type: state.type, value, current: "1" });
    }

    const handleSearch = value => setState({ type: value, value: state.value });

    return (
        <div style={{ marginLeft: "50px" }} >
            <Form
                form={form}
                name="addFrom"
                className="search-form"
                initialValues={{
                    remember: true,
                }}
            >
                <div style={{ display: 'flex' }} >
                    <Form.Item
                        style={{ width: "130px" }}
                        name="select"
                        label="搜索"
                        // hasFeedback
                        rules={[{ required: true, message: 'Please select your country!' }]}
                    >
                        <Select placeholder="类型" onChange={handleSearch} >
                            <Option value="username">账户</Option>
                            <Option value="gender">性别</Option>
                        </Select>
                    </Form.Item>
                    <Space direction="vertical">
                        <Search placeholder="input search text" onSearch={onSearch} enterButton />
                    </Space>
                </div>

            </Form>
        </div>
    )
}
